<script setup lang='ts' name="member-equity-add">
import type { FormInstance, FormRules } from 'element-plus'

import { updateEquity } from '@fl/api/anjutong'
import UpdatedOss from '@fl/components/upLoad-oss.vue'
import { ElButton, ElCard, ElForm, ElFormItem, ElInput, ElOption, ElSelect, ElSwitch } from 'element-plus'
import { useRouter } from 'vue-router'

const formRef = ref()
const router = useRouter()
const state = { code: '', info: '', logo: '', name: '', shortName: '', status: false, type: '' }
const form = ref({ ...state })

const equityOptions = [
    {
        color: 'red',
        label: '专属特权',
        value: 0,
    },
    {
        color: 'blue',
        label: '消费折扣',
        value: 1,
    },
]

const rules = reactive<FormRules<any>>({
    code: [
        { message: '不能为空', required: true, trigger: 'blur' },
    ],
    info: [
        { message: '不能为空', required: true, trigger: 'blur' },
    ],
    name: [
        { message: '不能为空', required: true, trigger: 'blur' },
    ],
    shortName: [
        { message: '不能为空', required: true, trigger: 'blur' },
    ],
    type: [
        {
            message: '请选择',
            required: true,
            trigger: 'change',
        },
    ],
})

async function doSave(formEl: FormInstance | undefined) {
    if (!formEl)
        return
    await formEl.validate((valid, fields) => {
        if (valid) {
            form.value.status = form.value.status ? 1 : 0 as any
            updateEquity(form.value).then((res: any) => {
                if (res.code === 200) {
                    ElMessage.success('新增成功')
                    close()
                }
                else {
                    ElMessage.error(res.msg)
                }
            })
        }
        else {
            ElMessage.error('输入不能为空')

            console.log('error submit!', fields)
        }
    })
}

function close() {
    setTimeout(() => {
        router.push('/member-center/member/member-equity')
    }, 1000)
}
</script>

<template>
    <ElCard>
        <ElForm ref="formRef"
                :model="form"
                label-width="auto"
                :rules="rules"
                style="max-width: 500px"
        >
            <ElFormItem label="权益名称"
                        prop="name"
            >
                <ElInput v-model="form.name" />
            </ElFormItem>

            <ElFormItem label="权益简称"
                        prop="shortName"
            >
                <ElInput v-model="form.shortName" />
            </ElFormItem>

            <ElFormItem label="权益编码"
                        prop="code"
            >
                <ElInput v-model="form.code" />
            </ElFormItem>

            <ElFormItem label="权益类型">
                <ElSelect v-model="form.type"
                          placeholder="请选择"
                          size="large"
                          style="width: 240px"
                >
                    <ElOption v-for="item in equityOptions"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                    />
                </ElSelect>
            </ElFormItem>

            <ElFormItem label="权益说明"
                        prop="info"
            >
                <ElInput v-model="form.info"
                         type="textarea"
                         clearable
                />
            </ElFormItem>

            <ElFormItem label="上传"
                        prop="logo"
            >
                <UpdatedOss v-model="form.logo" />
            </ElFormItem>

            <ElFormItem label="权益状态"
                        prop="status"
            >
                <ElSwitch v-model="form.status" />
            </ElFormItem>

            <ElFormItem flex
                        flex-col
            >
                <ElButton type="primary"
                          @click="doSave(formRef)"
                >
                    确定
                </ElButton>

                <ElButton @click="close">
                    取消
                </ElButton>
            </ElFormItem>
        </ElForm>
    </ElCard>
</template>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    width: 178px;
    height: 178px;
    font-size: 28px;
    color: #8c939d;
    text-align: center;
}
</style>
